<!-- 我的商户
 -->
<template>
  <view>
    <view
      class="head flex flex-ai-c flex-jc-sb"
      :style="{ filter: isBgShow ? 'blur(5rpx)' : '' }"
    >
      <view class="head-item">
        <view class="font-bold">{{ stationNum }}</view>
        <view class="font-24 color-666">累计商户</view>
      </view>
      <view class="head-item">
        <view class="font-bold">{{ washMachineNumber }}</view>
        <view class="font-24 color-666">累计洗车机</view>
      </view>
      <view class="head-item">
        <view class="font-bold">{{ earningsTotal }}</view>
        <view class="font-24 color-666">累计收益</view>
      </view>
    </view>
    <view
      v-for="(station, index) in stationList"
      :key="index"
      class="card"
      :style="{ filter: isBgShow ? 'blur(5rpx)' : '' }"
    >
      <view class="title">
        <view class="font-32 pb-10">{{ station.station_Name }}</view>
        <view class="flex flex-ai-c flex-jc-sb" v-if="!isOpen[index]">
          <view class="font-30"
            >洗车机
            <text class="color-38ACFF">{{
              station.washingMachineList.length
            }}</text>
          </view>
          <view
            ><text class="color-999">收益总计：</text> ￥{{
              station.earningsTotal
            }}
          </view>
        </view>
      </view>
      <view :class="isOpen[index] ? 'info-show' : 'info'">
        <view class="store">
          <view class="font-24 store-info flex flex-ai-c">
            <i-icon
              class="pr-10"
              icon="icondingdandengdai"
              type="single"
              size="30rpx"
              color="#999"
            ></i-icon>
            <view class="color-999">加入时间：</view>
            <view class="color-333">{{
              $u.date(station.addTime, 'yyyy-mm-dd')
            }}</view>
          </view>
          <view class="font-24 store-info flex flex-ai-c">
            <i-icon
              class="pr-10"
              icon="icondizhi1"
              type="single"
              size="30rpx"
              color="#999"
            ></i-icon>
            <view class="color-999">地址：</view>
            <view class="color-333 flex-1 flex flex-jc-sb flex-ai-c">
              <view class="address">{{ station.address }}</view>
              <view
                class="nav flex flex-ai-c"
                @click="gotoNav(station.lat, station.lon, station.address)"
              >
                <i-icon
                  icon="icondaohang"
                  type="single"
                  size="24rpx"
                  color="#333"
                ></i-icon>
                {{ station.distance }}km
              </view>
            </view>
          </view>
          <view class="font-24 store-info flex flex-ai-c">
            <i-icon
              class="pr-10"
              icon="iconcontact-person"
              type="single"
              size="30rpx"
              color="#999"
            ></i-icon>
            <view class="color-999">联系人：</view>
            <view class="color-333">{{ station.trueName }}</view>
          </view>
          <view
            class="font-24 store-info flex flex-ai-c"
            @click="call(station.mobile)"
          >
            <i-icon
              class="pr-10"
              icon="icondianhua01"
              type="single"
              size="30rpx"
              color="#999"
            ></i-icon>
            <view class="color-999">联系电话：</view>
            <view class="color-333 flex-1 flex flex-jc-sb">
              <view>{{ filterTel(station.mobile) }}</view>
              <u-icon size="24rpx" color="#999" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <view class="machine">
          <view class="flex flex-ai-c flex-jc-sb font-bold">
            <view class="font-30"
              >洗车机
              <text class="color-38ACFF">{{
                station.washingMachineList.length
              }}</text>
            </view>
            <view
              ><text class="color-999">收益总计：</text> ￥{{
                station.earningsTotal
              }}
            </view>
          </view>
          <view
            class="machine-info color-333 font-26 flex flex-ai-c flex-jc-sb"
            v-for="(item, index1) in station.washingMachineList"
            :key="index1"
          >
            <view>设备编号：{{ item.machine_Code }}</view>
            <view
              ><text class="color-999">收益：</text>￥{{ item.earnings }}</view
            >
          </view>
        </view>
      </view>
      <view class="flex flex-jc-c">
        <view class="icon-show" @click="showIndex(index)">
          <u-icon
            size="30rpx"
            color="#999"
            name="arrow-down"
            class="arrow-icon"
            :class="{ 'arrow-up': isOpen[index] }"
          ></u-icon>
        </view>
      </view>
    </view>

    <!-- 打电话弹窗 -->
    <view class="bg" v-show="isBgShow" @click="clickBg"></view>
    <!-- 电话框 -->
    <view class="phone" v-show="isBgShow">
      <view class="phone-1">
        <view style="border-bottom: 2rpx solid #e1e1e1">点击拨打</view>
        <view class="mobile fwb font-34" @click="makePhone">{{
          filterTel(phone)
        }}</view>
      </view>
      <view class="phone-2 mobile" @click="isBgShow = false">取消</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isBgShow: false,
      phone: '',
      earningsTotal: 0, //总收益
      stationNum: 0, //站点数量
      washMachineNumber: 0, //总洗车机数量
      stationList: [], //站点列表
      isOpen: null, //是否展开
      reg: /^(\d{3})\d*(\d{4})$/,
    }
  },

  onLoad() {
    this.getStoreInfo()
    this.getStationNumber()
  },

  methods: {
    getStoreInfo() {
      this.$api.washCar
        .myStore({ pageIndex: 1, pageSize: 10, lat: 30.67, lon: 104.06 })
        .then((res) => {
          console.log(res)
          this.earningsTotal = res.data.earningsTotal
          // this.stationNum = res.data.selfServiceCarWashStationNumber
          this.washMachineNumber = res.data.selfWashMachineNumber
          this.stationList = res.data.data.list
          this.isOpen = new Array(res.data.data.list.length).fill(false)
        })
        .catch((err) => {
          console.log(err)
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
    },

    // 商户数量
    getStationNumber(){
this.$api.washCar
        .getSelfServiceCarHomePage({ storeId:this.$store.state.userInfoDetail.store.storeId,
					isleague:false})
        .then((res) => {
          console.log(res)
          this.stationNum = res.data.merchant_num
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //展开 收起
    showIndex(index) {
      this.$set(this.isOpen, index, !this.isOpen[index])
    },
    //导航
    gotoNav(lat, lon, name) {
      uni.openLocation({
        latitude: lat,
        longitude: lon,
        name: name,
        success: function () {
          console.log('success')
        },
      })
    },

    //打电话
    call(number) {
      this.phone = number
      this.isBgShow = true
    },

    makePhone() {
      uni.makePhoneCall({
        phoneNumber: this.phone,
        complete: () => {
          this.isBgShow = false
        },
      })
    },

    clickBg() {
      this.isBgShow = false
    },

    filterTel(phone) {
      return phone.replace(this.reg, '$1****$2')
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}
.head {
  height: 130rpx;
  padding: 0 60rpx;

  .head-item {
    text-align: center;
    font-size: 44rpx;
    color: #333;
  }
}

.card {
  margin: 10rpx 24rpx 20rpx;
  background: #ffffff;
  box-shadow: 0px 0px 10rpx 0px rgba(31, 31, 31, 0.1);
  border-radius: 10rpx;
  padding: 0 20rpx 15rpx;

  .info {
    display: none;
  }

  .info-show {
    display: block;
  }

  .title {
    width: 100%;
    padding-top: 20rpx;
    font-weight: bold;
    color: #333;
  }
}
.color-38ACFF {
  color: #38acff;
}
.pb-10 {
  padding-bottom: 10rpx;
}
.pr-10 {
  padding-right: 10rpx;
}

.border-b {
  border-bottom: 2rpx solid #eee;
}

.icon-show {
  width: 110rpx;
  height: 40rpx;
  line-height: 40rpx;
  background: #f4f4f4;
  border-radius: 20rpx;
  text-align: center;

  .arrow-up {
    transform: rotate(180deg);
  }

  .arrow-icon {
    transition: all 0.3s;
  }
}
.store {
  padding-bottom: 10rpx;
  margin-bottom: 10rpx;
  border-bottom: 2rpx solid #eee;
  .store-info {
    height: 50rpx;
  }

  .address {
    width: 400rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .nav {
    min-width: 132rpx;
    height: 42rpx;
    background: #ffe23e;
    border-radius: 21rpx;
    padding: 0 12rpx;
  }
}

.machine {
  .machine-info {
    height: 88rpx;

    &:not(:last-child) {
      border-bottom: 2rpx solid #eee;
    }
  }
}

// 电话弹窗
.phone {
  position: fixed;
  bottom: 0;
  left: 30rpx;
  z-index: 12;
  text-align: center;

  .phone-1 {
    width: 690rpx;
    line-height: 100rpx;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20rpx;
  }
  .phone-2 {
    margin: 20rpx 0 30rpx 0;
    width: 690rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20rpx;
  }

  .mobile {
    color: #38acff;
  }
  .fwb {
    font-weight: bold;
  }
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #000000;
  opacity: 0.3;
}
</style>
